<template>
    <div id="basicInformation_cpxx_index_" class="padding">
        <div class="block">
            <fieldset class="layui-elem-field site-demo-button">
                <legend>操作</legend>
                <div style="padding: 0px 10px 10px" action="">
                    <el-button type="success" :disabled="!operation.xz" @click="operation.xz?xz():''">新增员工</el-button>
                    <el-button type="warning" :disabled="!operation.cx" @click="operation.cx?cx():''">查询</el-button>
                </div>
            </fieldset>
            <div class="padding">
                <el-form :inline="true" ref="searchDatas_" :model="searchDatas">
                    <el-form-item label="选择分类" prop="dlxl">
                        <el-cascader
                                v-model="searchDatas.dlxl"
                                :options="classifyTree"
                                change-on-select
                                :props="props">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="员工工号" prop="yggh">
                        <el-input v-model="searchDatas.yggh" style="width:220px" ></el-input>
                    </el-form-item>
                    <el-form-item label="员工名称" prop="ygmc">
                        <el-input v-model="searchDatas.ygmc" style="width:220px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetForm('searchDatas_')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-row>
                <el-col :span="9">
                    <fieldset class="layui-elem-field">
                        <el-tree :data="classifyTree"
                                 node-key="id"
                                 :expand-on-click-node="false"
                                 :render-content="renderContent"
                                 :default-expanded-keys="expandKeys"
                                 :default-checked-keys="checkedKeys"
                                 :props="defaultProps" style="height:548px"></el-tree>
                    </fieldset>
                </el-col>
                <el-col :span="15">
                    <!--产品列表-->
                    <table class="layui-hide" id="splb" lay-filter="splb"></table>
                </el-col>
            </el-row>
        </div>
        <script type="text/html" id="toolbar">
            <button class="el-button el-button--success el-button--mini is-round" lay-event="edit">编辑</button>
            <button class="el-button el-button--danger el-button--mini is-round" lay-event="del">删除</button>
        </script>
        <div style="display: none" id="add">
            <v-add style="margin-left: 30px" v-bind:options="classifyTree"  v-bind:saveDatas="saveDatas" ></v-add>
        </div>
        <div id="zuoxi" class="padding" style="display: none">
            <div class="el-input" >
                <div class="el-form-item">
                    <label class="el-form-item__label" style="width: 80px;">查询坐席</label>
                    <div class="el-form-item__content" style="margin-left: 80px;">
                        <div class="el-input" style="width: 300px;">
                            <input type="text" class="el-input__inner" id="zuoxiInput">
                        </div>
                        <button class="el-button el-button--primary" id="zuoxiButton">搜索</button>
                    </div>
                </div>
            </div>
            <table id="zuoxiList" lay-filter="zuoxiList"></table>
        </div>
        <div id="user" style="display: none" class="padding">
            <div class="el-input">
                <div class="el-form-item">
                    <label class="el-form-item__label" style="width: 80px;">查询用户</label>
                    <div class="el-form-item__content" style="margin-left: 80px;">
                        <div class="el-input" style="width: 300px;">
                            <input type="text" class="el-input__inner" id="userInput">
                        </div>
                        <button class="el-button el-button--primary" id="userButton">搜索</button>
                    </div>
                </div>
            </div>
            <table id="userList" lay-filter="userList"></table>
        </div>
        <!--权限-->
        <div id="permission" style="display: none" class="padding">
            <el-tree :data="permissionOption"
                     node-key="id"
                     :expand-on-click-node="false"
                     highlight-current
                     empty-text="未命名"
                     :render-content="renderPermissionContent"
                     :props="permissionProps">
            </el-tree>
        </div>
    </div>
</template>

<script>
    import add from "./ygxxAdd.vue"
    export default {
        name: "ygxx",
        components:{
          'v-add':add,
        },
        beforeCreate: function () {
            this.$nextTick(function () {
                this.searchTree();//查询员工分类
                this.searchYglb();//查询员工列表
            });
        },
        data() {
            return {
                permissionOption:[],
                expandKeys:[],//展开的keys
                checkedKeys:[],//选中的的keys
                permissionProps: {
                    id:'id',
                    children: 'children',
                    label: 'name'
                },
                operation: {//操作
                    xz: true,//新增
                    cx: true,//查询
                },
                searchDatas: {//查询条件
                    dlxl: [],
                    yggh:"",
                    ygmc:"",
                },
                saveDatas:{//新增或者修改的数据
                    dlxl:[],
                    dlxl_:[],
                    bz:"",
                    xb:"1",
                },
                classifyTree: [],//员工分类树
                props: {//分类树的内容
                    value: 'id',
                    label: 'label',
                    children: 'children'
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                splbHeader:[//员工列表的头
                    {field: 'id',  title: '序号',totalRowText: '合计：',sort:true,width:90}
                    , {field: 'ygmc', title: '员工名称',width:120}
                    , {field: 'yggh', title: '员工工号',width:120}
                    , {field: 'zxhm', title: '坐席号码',width:120}
                    , {field: 'lxdh', title: '联系电话',width:120}
                    , {field: 'xb', title: '性别',width:120,templet:function(res){return res.xb=='2'?'女':'男'}}
                    , {field: 'sfzh', title: '身份证号',width:120}
                    , {field: 'bz', title: '备注',width:160}
                    , {field: 'username', title: '用户名称',width:120}
                    , {fixed: 'right', width:200,title: '操作', align:'center', toolbar: '#toolbar'}
                ],
                multipleSelection: [],
                currentPage: 5,
                address:'',//指向permission(data)方法中data的地址
            }
        },
        methods: {
            permission:function(data) {//树的点击事件 查看以及分配权限
                this.$post('qx-sysnic/all-permission',{id:data.id})
                    .then(res=>{
                        this.permissionOption = res.data.data.permission
                        let permission_ = JSON.parse(data.permission)
                        for (let i in this.permissionOption) {
                            for (let j in permission_) {
                                if (this.permissionOption[i]['name'] == Object.keys(permission_[j])[0]){
                                    this.permissionOption[i]['show'] = true;
                                }
                            }
                            for (let j in this.permissionOption[i].children) {
                                for (let j_ in permission_) {
                                    if (this.permissionOption[i].children[j]['name'] == Object.keys(permission_[j_])[0]){
                                        this.permissionOption[i].children[j]['show'] = true;
                                    }
                                }
                            }
                        }
                    })
                this.address = data;
                allId = data.id
                allSuccess = false
                this.$message_.layOpen('#permission',()=>{
                    if (allSuccess===true){
                        this.searchTree()
                        this.checkedKeys = [data.id];
                        this.expandKeys = [data.id];
                        allSuccess=false
                    }
                },data.label+'(分配权限)')
            },
            addRemovePermission:function(node,data,show){
                let t = show?'新增':'移除';
                if (node.level==1){//第一级
                    this.permissionOption[data.id]['show'] = show;
                }else if (node.level==2){
                    this.permissionOption[data.pid]['children'][data.id]['show'] = show;
                }
                this.$post('qx-sysnic/sysnic_',{id:allId,changeNav:JSON.stringify(data)})
                    .then((res)=>{
                        if (res.data.res==1) {
                            this.$message({message: t+"该模块成功！", type: "success"})
                            allSuccess=allSuccess||true
                        }else{
                            if (res.data.res==-1){
                                this.$message({message: res.data.data, type: "error"})
                            }else{
                                this.$message({message: t+"该模块失败！", type: "error"})
                            }
                            if (node.level==1){//第一级
                                this.permissionOption[data.id]['show'] = !show;
                            }else if (node.level==2){
                                this.permissionOption[data.pid]['children'][data.id]['show'] = !show;
                            }
                        }
                    }).catch(()=>{
                        if (node.level==1){//第一级
                            this.permissionOption[data.id]['show'] = !show;
                        }else if (node.level==2){
                            this.permissionOption[data.pid]['children'][data.id]['show'] = !show;
                        }
                    })
            },
            view(data) {//树的点击事件
                this.searchYglb("basic-information-system-ygxx/list",{id: data.id})
            },
            xz: function () {//新增
                this.$cache_.flushData(this.saveDatas);
                this.saveDatas.dlxl = [];
                this.saveDatas.dlxl_ = [];
                this.saveDatas.xb = "1";
                allIndex = this.$message_.layOpen("#add");
            },
            xg: function (obj) {//修改
                this.saveDatas = obj.data;
                allIndex = this.$message_.layOpen("#add",()=>{
                    if (allSuccess=='success'){
                        obj.update(obj.data)
                    }
                });
            },
            cx: function () {//查询
                this.searchYglb("basic-information-system-ygxx/search-list",{CrmSystemYgxxSearch: this.searchDatas})
            },
            searchYglb:function (url="",datas={}) {//搜索员工列表
                noCheckCache = true;
                layui.use('table',() => {//加这个是防止刷新的时候会出现不存在render方法
                    layui.table.render({
                        elem: '#splb'
                        , url: url==""?"":(burl + url) //数据接口
                        , toolbar: '' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        , where: datas
                        , method: "post"
                        , height: 550
                        , limits: [10, 30, 60, 90]
                        , cols: [this.splbHeader]
                        , page: true //开启分页
                        , done:(res, curr, count)=>{
                            this.$message({message:'查询完成，右边列表为搜索结果！', type: "success"})
                        }
                    });
                    //监听行工具事件
                    layui.table.on('tool(splb)', (obj) => {
                        switch(obj.event){
                            case 'edit':
                                this.xg(obj);
                                break;
                            case 'del':
                                layer.confirm("确认是否删除该条员工！",(i) => {
                                    this.$message_.postTips(this,"删除",'basic-information-system-ygxx/delete',{id:obj.data.id},null,()=>{obj.del()})
                                    layer.close(i)
                                });
                                break;
                        };
                    });
                });
            },
            searchTree:function () {//搜索员工列表
                this.$post('basic-information-system-ygxx/all-classify',{},this)
                    .then((response) => {
                        if (response.data.res == 1) {//成功
                            this.classifyTree = response.data.data;
                        }
                    });
            },
            resetForm(searchDatas_) {//搜索的数据重置
                this.$refs[searchDatas_].resetFields();
            },
            append(data) {//新增节点
                let i = layer.prompt({title: '输入名称，并确认', formType: 2}, (label, i) => {
                    layer.close(i);
                    this.$message_.postTips(this,"新增员工分类",'basic-information-system-ygxx/add-classify',{CrmSystemGsxx:{ name: label,pid:data.id}},null,(response)=>{
                        const newChild = { id:response.data.data.id,label: label, children: [],pid:data.id};
                        if (!data.children) {
                            this.$set(data, 'children', []);
                        }
                        data.children.push(newChild);
                        this.searchTree()
                    })
                });
                $('.layui-layer-shade').click(()=>{//新增遮罩层的关闭事件
                    layer.close(i)
                })
            },
            remove(node, data) {//删除节点
                layer.confirm("确认是否删除该条员工分类！",(i) => {
                    this.$message_.postTips(this,"删除",'basic-information-system-ygxx/delete-classify',{id:data.id},null,(response)=>{
                        const parent = node.parent;
                        const children = parent.data.children || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        children.splice(index, 1);
                    })
                    layer.close(i);
                });
            },
            renderContent(h, { node, data, store }) {//渲染内容
                if (data.pid=="0"){
                    return (
                        <span class="custom-tree-node" style="flex:1">
                            <span style="float:left;margin-right:20px">
                                <a class="el-button el-button--text el-button--mini" style="color:black" size="mini" type="text" >{(node.label!=""&&node.label!=undefined)?node.label:"未命名"}</a>
                            </span>
                            <span style="float:right;margin-right:20px">
                                <el-button size="mini" type="text" on-click={ () => this.permission(data) }>权限</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.view(data) }>员工</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.append(data) }>新增</el-button>
                            </span>
                        </span>);
                } else{
                    return (
                        <span class="custom-tree-node" style="flex:1">
                            <span style="float:left;margin-right:20px">
                                <a class="el-button el-button--text el-button--mini" style="color:black" size="mini" type="text" >{(node.label!=""&&node.label!=undefined)?node.label:"未命名"}</a>
                            </span>
                            <span style="float:right;margin-right:20px">
                                <el-button size="mini" type="text" on-click={ () => this.permission(data) }>权限</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.view(data) }>员工</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.append(data) }>新增</el-button>
                                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                            </span>
                        </span>);
                }
            },
            renderPermissionContent(h, { node, data, store }) {//渲染内容
                if (data.show){
                    return (
                    <span class="custom-tree-node" style="flex:1">
                        <span style="float:left;margin-right:20px">
                            <a class="el-button el-button--text el-button--mini" style="color:black" size="mini" type="text" >{(node.label!=""&&node.label!=undefined)?node.label:"未命名"}</a>
                        </span>
                        <span style="float:right;margin-right:20px">
                            <el-button size="mini" type="text" style="color:red" on-click={ () => this.addRemovePermission(node, data,false) }>移除该模块</el-button>
                        </span>
                    </span>);
                }else{
                    return (
                    <span class="custom-tree-node" style="flex:1">
                        <span style="float:left;margin-right:20px">
                            <a class="el-button el-button--text el-button--mini" style="color:black" size="mini" type="text" >{(node.label!=""&&node.label!=undefined)?node.label:"未命名"}</a>
                        </span>
                        <span style="float:right;margin-right:20px">
                            <el-button size="mini" type="text" style="color:green" on-click={ () => this.addRemovePermission(node, data,true) }>添加该模块</el-button>
                        </span>
                    </span>);
                }
            }
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-tree-node__content {
        display: -webkit-flex; /* Safari */
        flex: 1;
    }
    .custom-tree-node {
        flex: 1;
        width: 100%;
        display: flex;
        display: -webkit-flex; /* Safari */
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 20px;
    }
</style>